{include file='common/header'}
{include file='common/nav'}

<link rel="stylesheet" href="{:HOME_ROOT}/css/diary.css"/>

<div id="container">
    <div class="content">

        <form action="{:url('Diary/writeDiary')}" method="post" enctype="multipart/form-data">
            <div class="form">
                <div class="form-control">
                    <select name="book">
                        <option value="null">选择日记本</option>
                        {each name="book" item="val"}
                            <option value="{$val['id']}">{$val['name']}</option>
                        {/each}
                    </select>
                </div>
                <div class="form-control">
                    <input type="file" name="image" v-on:change="fileImage" />
                    <img class="image" :src="image" />
                </div>
                <div class="form-control">
                    <textarea name="content" placeholder="日记内容"></textarea>
                </div>
                <div class="form-control">
                    <input type="submit" value="提交" />
                </div>
            </div>
        </form>

        {include file="common/dialog"}

    </div>
</div>

{include file='common/footer'}

<script language="JavaScript">

    Loaded(function () {

        VUEOPT.data.image = '';

        VUEOPT.methods.fileImage=function(e){
            this.image = window.URL.createObjectURL(e.target.files[0]);
        };

        var vm = new Vue(VUEOPT);

    });

</script>